/**
 * 租户列表
 */
<template>
     <vp-main-page @refresh="handleSearch">
		<template #search>
			<el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="handleSearch" label-width="120px">
				<vp-search-row >
					<vp-search-col :span="2">
						<el-form-item prop="keyword" >
							<template #label><vp-label zh="租户" en="Tenant"/></template>
							<el-input v-model="searchForm.keyword" v-trim placeholder="">
							</el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="handleSearch"/>
						<vp-btn-reset @click="handleSearchReset"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'systemTenant.edit'"  @click="handleAdd"/>
		</template>
		<template #table>
			<vp-table ref="tableRef" :data="tableData" @sort-change="handleSortChange"  row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column :label="$t('tenant.dprtcode')" 
					 sortable="custom" prop="dprtcode"
					 show-overflow-tooltip
					>
					<template #header><vp-label zh="编码" en="Code"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.dprtcode)"/>
					</template>
				</el-table-column>
				<el-table-column :label="$t('tenant.dprtname')" 
					prop="dprtname" sortable="custom" 
					show-overflow-tooltip
					>
					<template #header><vp-label zh="名称" en="Name"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.dprtname)"/>
					</template>
				</el-table-column>
				<el-table-column :label="$t('tenant.yxq')" show-overflow-tooltip width="190">
					<template #header><vp-label zh="有效期" en="Valid Date"/></template>
					<template #default="scope">
						<span>{{scope.row.deptinfo.yxqks}}~{{scope.row.deptinfo.yxqjs}}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column :label="$t('tenant.zcfjMax')" prop="deptinfo.zcfjMax" show-overflow-tooltip>
					<template #header><vp-label zh="飞机数量" en="Aircraft Number"/></template>
				</el-table-column> -->
				<el-table-column :label="$t('tenant.zczhMax')" prop="deptinfo.zczhMax" width="100">
					<template #header><vp-label zh="账号数量" en="User Num"/></template>
				</el-table-column>
				<el-table-column :label="$t('tenant.fjrl')"  show-overflow-tooltip width="110">
					<template #header><vp-label zh="附件容量" en="Storage Limit"/></template>
					<template #default="scope">
						<span>{{scope.row.deptinfo.fjrl}}{{formatRldw(scope.row.deptinfo.rldw)}}</span>
					</template>
				</el-table-column>
				<el-table-column  fixed="right" width="220">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn-add text v-if="scope.row.parentid==='0'" v-auth="'systemTenant.edit'" @click="handleAdd(scope.row)"/>
							<vp-btn-edit text v-auth="'systemTenant.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn text v-auth="'systemTenant.edit'"  @click="handleAdminUser(scope.row)"><vp-label zh="设置管理员" en="Set Admin"/></vp-btn>
							<vp-btn text v-auth="'systemTenant.edit'"  @click="handleEditMenu(scope.row)"><vp-label zh="菜单" en="Menu"/></vp-btn>
						</el-space>
					</template>
				</el-table-column>
			</vp-table>
		</template>	
		<EditTenant ref="editDialogRef" @formSubmited="formSubmit" ></EditTenant>
		<AddAdminUser ref="addAdminUserRef"></AddAdminUser>
		<EditTenantMenu ref="editTenantMenuRef"></EditTenantMenu>
	</vp-main-page>
</template>

<script setup lang="ts" name="systemTenant">
import { ref, toRefs, reactive, onMounted, watch, defineComponent, defineAsyncComponent } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import { DEFAULT_PAGE } from '/@/utils/page';

const EditTenantMenu = defineAsyncComponent(() => import('./component/EditTenantMenu.vue'));
const AddAdminUser = defineAsyncComponent(() => import('./component/AddAdminUser.vue'));
const EditTenant = defineAsyncComponent(() => import('./component/EditTenant.vue'));

	const searchForm = reactive({
		keyword: "",
	});

	const page = reactive({
		...DEFAULT_PAGE,
	})

	const loading = ref(false);
	const tableData = ref([]);

	const loadDataList = () => {
			loading.value = true
			request.get('/system/tenant/list', {
				params: {
					...searchForm,
					...page,
				}
			}).then(res => {
				tableData.value = res?.data || []
 			}).finally(()=>{
				loading.value = false;
			})
		}

		const searchFormRef = ref();

		const handleSearch = ()=>{
			if(page.pageNum == 1){
				loadDataList()
			}else{
				page.pageNum = 1
			}
		}
		const handleSearchReset = ()=>{
			searchFormRef.value.resetFields();
		}
		const handleSortChange = (column: any)=>{
			page.sortColumn = column.prop;
			page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
			loadDataList()
		}
		watch(()=>[page.pageNum, page.pageSize], ()=>{
			loadDataList()
		})
		onMounted(() => {
			loadDataList()
		})

		const editDialogRef = ref();

		const handleAdd = (row: any)=>{
			editDialogRef.value.handleOpen(row?.id, 'add');
		};
		const handleEdit = (row: any)=>{
			editDialogRef.value.handleOpen(row.id, 'edit');
		}
		const formSubmit = ()=>{
			handleSearch();
		}

		const addAdminUserRef = ref()

		const handleAdminUser = (row: any)=>{
			addAdminUserRef.value.handleOpen(row.dprtcode);
		}

		const formatRldw = (val: Number) => {
			if(val === 1){
				return "M";
			}else if(val === 2){
				return "G";
			}else{
				return "T";
			}
		}
		const editTenantMenuRef = ref();
		//编辑菜单
		const handleEditMenu = (row: any)=>{
			editTenantMenuRef.value.handleOpen(row.dprtcode);
		}

		const tableRef = ref();

</script>